
{% extends 'layout.twig' %}

{% block css %}
    <link rel="stylesheet" href="/lib/videojs/video-js.css"/>
{% endblock %}

{% block content %}
    <div class="row">
        <div class="col-sm-8">
            <div  id="video-wrap" class="row">
                <video id="video" class="video-js vjs-default-skin" controls preload="auto" autoplay data-setup="{}">
                    <source src="/resources/{{ video.path }}" type="video/mp4">
                </video>
            </div>
            <div id="barrage" class="row mt10">
                <div class="col-sm-12">
                    <input type="text" class="form-control" placeholder="" maxlength="32" />
                </div>
            </div>
        </div>
        <div id="info" class="col-sm-4">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <span class="pull-left">当前人数： <span id="p-count">0</span></span>
                    <span class="pull-right">评论数： <span  id="c-count">{{ video.barrage_count }}</span></span>
                </div>
                <ul class="panel-body list-group">
                    {% for barrage in video.barrage %}
                        <li class="list-group-item" title="{{ barrage.content }}"
                            data-duration="{{ barrage.duration }}"
                            data-time = "{{ barrage.time }}"
                                >{{ barrage.content }}</li>
                    {% endfor %}
                </ul>
            </div>
        </div>
    </div>
{% endblock %}

{% block footer %}
    <script type="text/javascript" src="/lib/jquery/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="/socket.io/socket.io.js"></script>
    <script type="text/javascript" src="/lib/videojs/video.js"></script>
    <script type="text/javascript" src="/js/video.js"></script>
{% endblock %}
